<!--
 * @Author: wangshuixin 2412658453@qq.com
 * @Date: 2024-06-20 17:14:54
 * @LastEditors: wangshuixin 2412658453@qq.com
 * @LastEditTime: 2024-06-22 14:07:30
 * @FilePath: \web-components-box\components\File\previewFile.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <div class="container h-full w-full bg-[#F7F8FA]">
    <div class="h-[16px] bg-[#F7F8FA]"></div>
    <div class="page-content ml-[16px] mb-[16px]" :style="{ height:  props.data.length > 1 ? 'calc(100% - 116px)' : 'calc(100% - 32px)' } ">
      <img
        v-if="props.data[curFileIndex].fileType === 'png'|| props.data[curFileIndex].fileType === 'jpg' || props.data[curFileIndex].fileType === 'jpeg'"
        class="w-full h-auto" :src="props.data[curFileIndex].url"
        mode="aspectFit" alt="不支持预览该类型"
      />
      
      <web-view
        v-else-if="props.data[curFileIndex].fileType === 'pdf'"
        :src="props.data[curFileIndex].url" bindmessage="handleMessage"
      />
      
      <!-- <embed
        v-else-if="props.data[curFileIndex].fileType === 'pdf'"
        class="w-full h-full" :src="props.data[curFileIndex].url" type="application/pdf"> -->
    </div>
    <!-- 固定在底部的按钮容器 -->
    <div v-if="props.data.length > 1" class="footer-buttons h-[84px] bottom-[0px] p-[10px] bg-white">
      <button v-if="curFileIndex !== 0" class="absolute top-[10px] left-[16px] w-[163px] h-[36px] text-[15px] font-normal rounded-[100px] bg-[#F0F0FF]" style="color: #6B6AFF;" @click="getPreviousFile">
        上一个
      </button>
      <button v-if="curFileIndex !== props.data.length - 1" class="absolute top[10px] right-[16px] w-[163px] h-[36px] text-[15px] font-normal rounded-[100px] bg-[#6B6AFF]" style="color: white;" @click="getNextFile">
        下一个
      </button>
    </div>
  </div>
</template>
<script setup lang="ts">
interface previewFileObject {
  fileName?: string, // 文件名
  url?: string, // 文件下载地址
  fileType?: string, // 文件类型
  [property: string]: any
} 
const props = defineProps({
  data: { // 预览文件数据
    type: Array<previewFileObject>,
    required: true,
  },
  currentIndex: { // 当前预览文件的坐标
    type: Number,
    default: () => { return 0 }
  }
})
console.log(props.data)
// 当前查看的文件
const curFileIndex = ref(props.currentIndex)
// 查看 上一个 附件
const getPreviousFile = () => {
  curFileIndex.value--
}
// 查看 下一个 附件
const getNextFile = () => {
  curFileIndex.value++
}
</script>
<style scoped lang="scss">
.container {
  flex-direction: column;
  box-sizing: border-box;
  .page-content {
    @apply relative overflow-y-auto;
    width: calc(100% - 32px);
  }
  .footer-buttons {
    @apply flex fixed w-full;
    box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.1); /* 可选：添加阴影效果 */
  }
}
</style>